<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>房间列表</title>
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <link href="css/roomList.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="miandiv">
      <div class="title">
        <ul>
          <li>房间号</li>
          <li>房主名</li>
          <li>房间名</li>
          <li>人数</li>
          <li>密码</li>
          <li>操作</li>
        </ul>
      </div>
      <div class="list">
        <ul>
          <li title="12">12</li>
          <li title="无敌">无敌</li>
          <li title="asdasdasdasdad">asdasdasdasdad</li>
          <li title="1/2">1/2</li>
          <li><i></i></li>
          <li title="加入">
            <a class="list_ul_li_a isNot">加入</a>&nbsp;<a class="list_ul_li_a"
              >观战</a
            >
          </li>
        </ul>
        <ul>
          <li title="12">12</li>
          <li title="无敌">无敌</li>
          <li title="asdasdasdasdad">asdasdasdasdad</li>
          <li title="1/2">1/2</li>
          <li></li>
          <li>
            <a onclick="joinRoom(123,1)" class="list_ul_li_a">加入</a>&nbsp;<a
              onclick="joinRoomByCus(sad)"
              class="list_ul_li_a"
              >观战</a
            >
          </li>
        </ul>
      </div>
    </div>
  </body>
  <script>
    //房间编号,房主名,房间信息,房间状态,密码,加入

    $(function () {
      $(".list").empty();
      //查询订单记录的接口
      queryRoomList();
    });

    function queryRoomList() {
      $.ajax({
        type: "get",
        url: "http://localhost:8080/room/list",
        success: function (data) {
          if (data.length == 0) {
            var html =
              ' <ul style="display: flex; width: 100%; height: 80px"> <li style="width: 100%;height: 100%;font-size: 26px;text-align: center;  line-height: 80px;">暂无房间</li></ul>';
            $(".list").append(html);
          } else {
            console.log(data);
            //data -> 记录列表
            //for -> data -> <tr></tr> -> <tbody>
            for (var i = 0; i < data.length; i++) {
              //从data数组中取出第i条记录
              var item = data[i];

              var html =
                " <ul>" +
                '<li title="' +
                item.rid +
                '">' +
                item.rid +
                "</li>" +
                '<li title="' +
                item.nickName +
                '">' +
                item.nickName +
                "</li>" +
                '<li title="' +
                item.info +
                '">' +
                item.info +
                "</li>" +
                '<li title="' +
                (item.status == 0 ? "1/2" : "2/2") +
                '">' +
                (item.status == 0 ? "1/2" : "2/2") +
                "</li>" +
                " <li>" +
                (item.isPass == 0 ? "" : "<i></i>") +
                "</li>" +
                " <li>" +
                (item.status == 0
                  ? '<a onclick="joinRoom(' +
                    item.rid +
                    "," +
                    item.isPass +
                    ')" class="list_ul_li_a">加入</a>'
                  : '<a class="list_ul_li_a isNot">加入</a>') +
                "&nbsp;" +
                (item.isSubscrribe == 0
                  ? '<a onclick="joinRoomByCus(' +
                    item.rid +
                    ')" class="list_ul_li_a">观战</a>'
                  : '<a class="list_ul_li_a isNot">观战</a>') +
                "" +
                " </ul>";

              $(".list").append(html);
            }
          }
          $(window.parent)[0].setiframeHight($("body").height());
        },
      });
    }

    function joinRoom(rid, ispass) {
      $(window.parent)[0].joinRoom(rid, ispass);
    }

    function joinRoomByCus(rid) {
      $(window.parent)[0].joinSubscrribe(rid);
    }
  </script>
</html>
